<!-- 主 Banner 轮播图 -->
<section class="relative w-full h-[<%= bannerHeight %>px] overflow-hidden rounded-lg">
    <div class="swiper-container h-full" id="main-swiper">
        <div class="swiper-wrapper">
            <% banners.forEach(function(banner, index) { %>
                <div class="swiper-slide h-full relative">
                    <img src="<%= banner.pic %>" alt="<%= banner.description %>"
                         class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-center justify-center text-center">
                        <div class="text-white max-w-2xl px-4">
                            <h2 class="text-3xl md:text-4xl font-bold mb-3 transform transition-all duration-700 translate-y-4 opacity-0 slide-title">
                                <%= banner.title %>
                            </h2>
                            <% if (banner.description) { %>
                                <p class="text-base md:text-lg mb-4 transform transition-all duration-700 translate-y-4 opacity-0 slide-desc">
                                    <%= banner.description %>
                                </p>
                            <% } %>
                            <a href="<%= banner.url %>"
                               class="inline-block bg-white text-gray-900 px-6 py-2 rounded-full text-sm font-medium
                                      hover:bg-gray-100 transition duration-300 transform transition-all duration-700 translate-y-4 opacity-0 slide-btn">
                                立即选购
                            </a>
                        </div>
                    </div>
                </div>
            <% }); %>
        </div>
        <!-- 自定义分页器 -->
        <div class="swiper-pagination !bottom-4"></div>
        <!-- 自定义导航按钮 -->
        <div class="swiper-button-prev !left-4"></div>
        <div class="swiper-button-next !right-4"></div>
    </div>
</section>

<style>
    /* 轮播图激活态样式 */
    .swiper-slide-active .slide-title,
    .swiper-slide-active .slide-desc,
    .swiper-slide-active .slide-btn {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    .slide-title { transition-delay: 300ms; }
    .slide-desc { transition-delay: 500ms; }
    .slide-btn { transition-delay: 700ms; }

    /* Swiper 导航按钮样式 */
    #main-swiper .swiper-button-next,
    #main-swiper .swiper-button-prev {
        color: #fff;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        width: 36px;
        height: 36px;
        transition: all 0.3s ease;
        transform: translateY(-50%);
    }

    #main-swiper .swiper-button-next:hover,
    #main-swiper .swiper-button-prev:hover {
        background-color: rgba(0, 0, 0, 0.6);
    }

    #main-swiper .swiper-button-next:after,
    #main-swiper .swiper-button-prev:after {
        font-size: 16px;
    }

    /* Swiper 分页器样式 */
    #main-swiper .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: rgba(255, 255, 255, 0.6);
        opacity: 1;
        transition: all 0.3s ease;
    }

    #main-swiper .swiper-pagination-bullet-active {
        background: #fff;
        width: 24px;
        border-radius: 4px;
    }
</style>